<template>
    <div class="top-bar">
        <div class="wrap">
            <div class="left">
                欢迎来到叩丁狼积分商城
            </div>
            <div class="right">
                <ul>                     
                    <li @click="hdClick">
                        <img :src="userInfo.headImg" alt="" width="26">
                        用户名：{{userInfo.nickName}}
                    </li>
                    <li>我的积分：{{userInfo.coin}}</li>
                    <li>获取积分</li>
                    <li>叩丁狼官网</li>
                    <li class="tologin-btn" v-show="!isLogined" @click="toLogin">登录</li>
                    <li class="cart-btn" v-show="isLogined">
                        <img src="../assets/img/cart.png" alt="">
                        <span>购物车</span>
                        <b>{{cartTotal}}</b>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import {mapMutations,mapState,mapActions} from "vuex"
import {WeixinLoginAPI} from "@/request/api"
export default {
    data () {
        return {
            // cartTotal:5
            
        }
    },
    // watch:{
    //     "$route.path":{
    //         handler(){
    //             // 只要路径发生变化，就会执行这里的代码
    //             let mytoken = localStorage.getItem("x-auth-token")

    //             // 让购物车按钮，根据有没有本地token，进行显示或者隐藏
    //             if(mytoken){
    //                 this.changeIsLogined(true)
    //             }else{
    //                 this.changeIsLogined(false)
    //             }
    //            }
    //     }
    // },
    created(){
        
        // 向我们后端服务器发起微信登录的请求，携带 code ，我们需要在地址栏上面先拿到这个code
        setTimeout(async ()=>{
            let mycode = this.$route.query.code;
            // 加载这个topbar组件的时候不一定用户就是在做微信扫码登录
            if(mycode){
                // 解决登陆成功再次发起请求的bug：清除地址栏上的code(路由跳转到当前路径即可)
                // 在拿到code之后，发起请求之前清除这个code
                this.$router.push(this.$route.path)

                console.log("-----this.$route.path为：",this.$route.path);
                // 有mycode是扫码登录的情况
                let res = await WeixinLoginAPI({
                    code:mycode
                });
                console.log(res);  //false
                // code 将来有3种情况
                if(res.code==0){
                    // 扫码登录成功，可以拿到token

                    // 1、提示用户登录成功
                    this.asyncChangeIsShowToast({
                        msg:"登录成功！",
                        type:"success"
                    });

                    // 3、保存token值到localStorage中
                    localStorage.setItem("x-auth-token", res["x-auth-token"])
                    // 4、登录状态值切换（这个值影响页面信息的展示： 比如用户信息，比如登录按钮和购物车按钮）
                    this.changeIsLogined(true);

                    

                    // 登录成功之后，获取用户信息
                    this.asyncChangeUserInfo()


                }else if(res.code==400){
                    // 二维码过期
                    // 1 提示用户重新登录
                    this.asyncChangeIsShowToast({
                        msg:res.message,
                        type:"warning"
                    })
                    // 2 打开登录窗口
                    this.changeIsShowLoginModal(true)
                    
                }else if(res.code==407){
                    // 用户这次扫码的微信还没有绑定手机号

                    // 1 提示用户，微信未绑定手机号，需要通过手机号登录来绑定这个微信
                    this.asyncChangeIsShowToast({
                        msg:res.message,
                        type:"warning"
                    })
                    // 2 打开登录窗口
                    this.changeIsShowLoginModal(true)
                    // 3 保存uuid，以便之后用户登录的时候，能够获取并携带这个uuid
                    localStorage.setItem("uuid",res.uuid)


                }
            }else{
                // 不是做扫码登录的情况： 要么用户还没有登录，要么用户已经登录
                let mytoken = localStorage.getItem("x-auth-token");
                this.changeIsLogined(Boolean(mytoken));
                if(mytoken){
                    // 有登录的情况，获取用户用户信息
                    this.asyncChangeUserInfo()
                }else{
                    // 没有登录的情况，把Vuex中的用户数据，初始化为原来的数据
                    this.initUserInfo()
                }   

            }
        },100)
        
    },
    computed:{
        ...mapState({
            isLogined:state=>state.loginStatus.isLogined,
            cartTotal:state=>state.userInfo.cartTotal,
            userInfo:state=>state.userInfo.userInfo,
        })
    },
    methods:{
        ...mapMutations({
            changeIsShowLoginModal:"handleLoginModal/changeIsShowLoginModal",
            changeIsLogined:"loginStatus/changeIsLogined",
            initUserInfo:"userInfo/initUserInfo"
        }),
        ...mapActions({
            asyncChangeIsShowToast:"handleToast/asyncChangeIsShowToast",
            asyncChangeUserInfo:"userInfo/asyncChangeUserInfo"
        }),
        toLogin(){
            // 弹出登录窗口， 修改Vuex中的isShowLoginModal
            this.changeIsShowLoginModal(true)
        },
        hdClick(){
            // 封装原则：
            // 让调用方尽可能简单

            // 调用方
            // warning 警告
            // success 成功
            // danger 失败
            this.asyncChangeIsShowToast({
                msg:"登录失败！",
                type:"danger"
            })

            
        }
    }
}
</script>

<style lang = "less" scoped>
@import url("../assets/styles/global.less");
.top-bar{
    height: 40px;
    line-height: 40px;
    background: #242B39;
    color: #FFFEFE;
    .wrap{
        height: 40px;
        font-size: 14px;
        /* background: #fcf; */
        display: flex;
        justify-content: space-between;

        .right ul{
            display: flex;
            li{
                display: flex;
                align-items: center;
                margin-left: 20px;
                cursor: pointer;
                img{border-radius: 13px;margin-right: 5px;}

                &.tologin-btn{
                    width: 124px;
                    height: 40px;
                    background: @base-color;
                    justify-content: center;
                }
            }

        }
    }

}

.cart-btn{
    width: 124px;
    height: 40px;
    background: @base-color;
    justify-content: center;
    img{margin-right: 6px;}
    b{
        width: 22px;
        height: 22px;
        line-height: 22px;
        margin-left: 6px;
        text-align: center;
        background: #FD604D;
        border-radius: 11px;
    }
}
</style>